<template>
  <div>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="4">-->
<!--        <el-avatar :src="this.$store.getters.getUser.header"></el-avatar>-->
<!--      </el-col>-->
<!--      <el-col :span="20">-->
<!--        <el-input type="textarea" v-model="reply.content"></el-input>-->
<!--        &lt;!&ndash; 表情 &ndash;&gt;-->
<!--        <el-popover placement="bottom"-->
<!--                    title="标题"-->
<!--                    width="500"-->
<!--                    height="700"-->
<!--                    trigger="click"-->
<!--                    v-model="emojiShows">-->
<!--          <el-button style="margin-top: 10px" slot="reference" size="medium">😀</el-button>-->
<!--          <div class="browBox">-->
<!--            <ul>-->
<!--              <li v-for="(item, index) in faces" :key="index" @click="getBrow(index)">-->
<!--                {{ item }}-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </el-popover>-->
<!--        <el-button type="success" size="medium" style="margin-top: 10px; float: right" @click="submitReply">-->
<!--          发表回复-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <div v-for="item in replyList" style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="3">
          <div style="text-align: center">
            <el-avatar size="small" :src="item.header != null ? item.header : avatar"></el-avatar>
          </div>
        </el-col>
        <el-col :span="21">
          <div>
            <p style="font-size: 15px">{{ item.nickname }}</p>
          </div>
          <div style="margin-top: 10px">
            <p v-html="item.content"></p>
          </div>
          <div style="margin-top: 10px; font-size: 13px" id="div-comment">
            <span>{{ item.createTime }}</span>
            <span style="margin-left: 5px; cursor: pointer" @click="thumbsUpReply(item.id)">
                      <i class="iconfont" v-if="replyIds.indexOf(item.id) == -1">&#xe8c3;</i>
                      <i class="iconfont i-comment-thumbs-after" v-else>&#xe8c3;</i>
                      <span :id="item.id"> {{ item.thumbsCount }}</span>
                    </span>
            <span style="margin-left: 5px; cursor: pointer" @click="replyOneReply(item.id, item.nickname, item.memberId)"> 回复 {{ item.replyCount }}</span>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>

    <div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-avatar :src="this.$store.getters.getUser.header"></el-avatar>
        </el-col>
        <el-col :span="20">
          <el-input type="textarea" v-model="reply.content" :placeholder="placeholder"></el-input>
          <!-- 表情 -->
          <el-popover placement="bottom"
                      title="标题"
                      width="500"
                      height="700"
                      trigger="click"
                      v-model="emojiShows">
            <el-button style="margin-top: 10px" slot="reference" size="medium">😀</el-button>
            <div class="browBox">
              <ul>
                <li v-for="(item, index) in faces" :key="index" @click="getBrow(index)">
                  {{ item }}
                </li>
              </ul>
            </div>
          </el-popover>
          <el-button type="success" size="medium" style="margin-top: 10px; float: right" @click="submitReply">
            发表回复
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Global from "../Global";
import commentReply from "@/api/club/commentReply";
import memberThumbsReply from "@/api/member/memberThumbsReply";

export default {
  name: "Reply",
  props: ["commentId", "articleId", "replyIds"],
  data() {
    return {
      emojiShows: false,  //表情框是否展示
      //表情列表
      faces: [],
      //表情文本
      getBrowStrings: "",
      reply: {
        content: ''
      },
      replyList: [],  //回复列表
      replyThumbs: {},
      placeholder: '',
    }
  },

  created() {
    this.loadEmojis()

    this.getReplyByCommentId()
  },

  methods: {

    //加载表情，存放到表情列表中
    loadEmojis() {
      for (let i in Global.appData) {
        this.faces.push(Global.appData[i].char);
      }
    },

    getBrow(index) {
      for (let i in this.faces) {
        if (index == i) {
          this.getBrowStrings = this.faces[index];
          this.reply.content += this.getBrowStrings;
        }
      }
      this.emojiShows = false;
    },

    //获取恢复信息
    getReplyByCommentId() {
      const param = {
        page: 1,
        commentId: this.commentId
      }
      commentReply.getReplyInfoByCommentId(param)
          .then(result => {
            const data = result.data
            this.replyList = data
          })
    },

    submitReply() {
      //判断用户是否登录
      if (!this.$store.getters.getUser) {
        this.$message({
          message: '请先登录',
          type: 'warning'
        })
        return
      }

      this.reply.articleId = this.articleId
      this.reply.memberId = this.$store.getters.getUser.id
      this.reply.commentId = this.commentId
      console.log(this.reply)

      commentReply.saveReplyInfo(this.reply)
          .then(result => {
            this.getReplyByCommentId()
          })
    },

    thumbsUpReply(id) {
      console.log(id)
      //判断用户是否登录
      if (!this.$store.getters.getUser) {
        this.$message({
          message: '请先登录',
          type: 'warning'
        })
        return
      }

      this.replyThumbs.replyId = id
      this.replyThumbs.memberId = this.$store.getters.getUser.id
      this.replyThumbs.commentId = this.commentId
      this.replyThumbs.articleId = this.articleId
      memberThumbsReply.thumbsUpReply(this.replyThumbs)
          .then(result => {
            const data = result.data
            let ele = document.getElementById(id)
            let previousEle = ele.previousElementSibling
            if (0 == data) {
              previousEle.setAttribute("class", "iconfont")
              const value = parseInt(ele.innerText.trim()) - 1
              ele.innerText = ' ' + value
            } else {
              previousEle.setAttribute("class", "iconfont i-comment-thumbs-after")
              const value = parseInt(ele.innerText.trim()) + 1
              ele.innerText = ' ' + value
            }
          })
    },

    //回复某条评论
    replyOneReply(id, nickname, memberId) {
      console.log(nickname, memberId)
      this.reply.parentId = id
      this.placeholder = '回复 @' + nickname + ": "
      const content = this.reply.content
      this.reply.content = this.placeholder + content
      this.reply.toMemberId = memberId
    }

  }
}
</script>

<style scoped>
.browBox {
  width: 100%;
  height: 200px;
  background: #ffffff;
  position: absolute;
  z-index: 100;
  bottom: 0px;
  overflow: scroll;
}

.browBox ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.browBox ul li {
  cursor: pointer;
  width: 10%;
  font-size: 20px;
  list-style: none;
  text-align: center;
}

.i-comment-thumbs-after {
  color: #2a80ef;
}
</style>